﻿<!--Full Calendar-->
<link rel='stylesheet' type='text/css' href='@Url.Content("~/Scripts/jquery/fullCalendar/fullcalendar.css")' />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Scripts/jquery/fullcalendar/fullcalendar.print.css")"/>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery/fullcalendar/jquery/jquery-1.9.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery/fullcalendar/jquery/jquery-ui-1.10.2.custom.min.js")"></script>
<script type='text/javascript' src='@Url.Content("~/Scripts/jquery/fullCalendar/fullcalendar.min.js")'></script>

@{
    int idProgramacion = ViewBag.idProgramacion;
    int idTaller = ViewBag.idTaller;
}

<div id="calendario" data-idProgramacion="@(idProgramacion)" data-idTaller="@(idTaller)">
</div>

<style type='text/css'>
   @* body
    {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;
    }*@

    
    #calendario
    {
        width: 1000px;
        margin: 0 auto;        
    }

   .fc-event {   
        font-size: 0.72em;
        font-weight: bold;        
   }

   .fc-event-title{
        color:red;
   }
    
</style>
<script>

    //alert($("#calendario").attr("data-idProgramacion"));

    

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var idProg = $("#calendario").attr("data-idProgramacion");
    var idTaller = $("#calendario").attr("data-idTaller");

    var options = {
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        timeFormat: {
            agenda: 'h(:mm)t{ - h(:mm)t}',
            '': 'h(:mm)t{-h(:mm)t }'

        },
        monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
        buttonText: {
            today: 'hoy',
            month: 'mes',
            week: 'semana',
            day: 'día'
        },
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        description: description,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: false,
        events: 
            {
                url:'@Url.Content("~")' + "Supervisor/Main/ObtenerFechasDeProgramacion",
                data: { idProgramacion: idProg, idTaller: idTaller }
            },
        eventRender: function (event, element) {
            element.find('.fc-event-time').append("<br/>");            
            element.find('.fc-event-title').append("<br/>" + event.description);
        }
    };
    //alert(options);
    $('#calendario').fullCalendar(options);

</script>

